<template>
    <div class="advertDetails">
        <el-card>
            <el-form ref="form" :model="formData" label-width="90px">
                <el-form-item label="广告名称">
                    <el-input v-model="formData.title" placeholder="请填写广告名称" style="max-width:218px;"></el-input>
                </el-form-item>
                <el-form-item label="所属广告位">
                    <el-select v-model="formData.position_id" placeholder="请选择所属广告位">
                        <el-option
                            v-for="item in positionData"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        ref="upload"
                        class="avatar-uploader"
                        :action="uploadFileURL"
                        accept="image/jpeg,image/gif,image/png"
                        :show-file-list="false"
                        name="file"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="组图">
                    <el-upload
                        :action="uploadFileURL"
                        list-type="picture-card"
                        multiple
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handlePictureCardSuccess"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="跳转链接">
                    <el-input v-model="formData.linkurl" placeholder="请填写跳转链接" style="max-width:218px;"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="formData.sort" placeholder="请填写排序" style="max-width:218px;"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button @click="handleCancle">取消</el-button>
                    <el-button type="primary" @click="handleSubmit('advertManage')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import {changeTitleMinin} from '@/mixin';
import {uploadFileURL} from '@/utils/url';
import http from '@/api/advert'
export default {
    name: 'advertDetails',
    mixins: [changeTitleMinin],
    data() {
        return {
            formData: {
                status: 1
            },
            positionData: [],
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            pageParams: null,
            uploadFileURL,
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log('res, file:',res, file);
            console.log(file);
            this.formData['picurl'] = res.img;
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isPicture = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isPicture) {
            this.$message.error('上传头像图片只能是图片格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isPicture && isLt2M;
        },
        handlePictureCardSuccess(res, file, fileList) {
            console.log('handlePictureCardSuccess res, file:',res, file, fileList);

            this.fileList=fileList;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList=fileList;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        handleCancle(){
            this.$router.go(-1);
        },
        // 提交 操作
        handleSubmit(name,params){
            console.log('this.fileList:',this.fileList);
            //return ;
            let formData = JSON.parse(JSON.stringify(this.formData));
            if(this.pageType=='create'){
                formData.center_id = JSON.parse(sessionStorage.getItem('user')).center_id;
            }
            if(this.fileList.length){
                let picarr = [];
                this.fileList.map(item=>{
                    if(item.response){
                        picarr.push({
                            url: item.response.data
                        })
                    } else {
                        picarr.push({
                            url: item.url
                        })
                    }
                    
                })
                formData.picarr = JSON.stringify(picarr);
            }
            console.log('formData:',formData)
            if(this.pageParams.pageType=='create'){
                http.createContent(formData).then(res=>{
                    this.$message.success(res.msg || '新增成功！');
                    this.$router.push({name,params});
                })
            }else{
                http.editContent(formData).then(res=>{
                    this.$message.success(res.msg || '编辑成功！');
                    this.$router.push({name,params});
                })
            }
        },

        // getContentDetail
        getContentDetail(id){
            http.getContentDetail({id}).then(res=>{
                let formData = res.data;
                if(formData.picarr){
                    this.fileList = formData.picarr;
                }
                if(formData.picurl){
                    this.imageUrl = formData.picurl;
                }
                this.formData = formData;
            })
        },

        getPageParams(){
            if(Object.keys(this.$route.params).length){
                sessionStorage.setItem('advertDetailsParams',JSON.stringify(this.$route.params))
            }

            let pageParams = sessionStorage.getItem('advertDetailsParams');
            console.log('pageParams:',pageParams)
            if(pageParams){
                pageParams = JSON.parse(pageParams);
                this.pageParams = pageParams;

                if(pageParams.id){
                    this.getContentDetail(pageParams.id);
                }
            }
        },

        getAdvertAdposition(){
            http.getAdPosition().then(res => {
                this.positionData = res.data;
            })
        }
    },
    created(){
        this.getPageParams();
        this.getAdvertAdposition();
    }
}
</script>

<style lang="scss" scoped>
.advertDetails{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
}
</style>

<style  lang="scss">
.advertDetails{
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 148px;
        height: 148px;
        line-height: 148px;
        text-align: center;
    }
    .avatar {
        width: 148px;
        height: 148px;
        display: block;
    }
}
</style>